<template>
	<view class="container">
        <u-toast ref="uToast" />
        <view class="avator-box flex">
            <u-avatar :src="avatarUrl" :size="100"></u-avatar>
            <!-- <view>修改头像<u-icon name="arrow-right" color="#333" size="28"></u-icon></view> -->
        </view>
        <view class="info-list">
            <view class="info-item flex">
                <view class="label">姓名</view>
                <view class="item">{{name}}</view>
            </view>
            <!-- <view class="info-item flex">
                <view class="label">身份证</view>
                <view class="item">{{idNo}}</view>
            </view> -->
            <view class="info-item flex" @click="toModify('phone')">
                <view class="label">绑定手机</view>
                <view class="item">{{phone}}<u-icon class="ml-10" name="arrow-right" color="#666" size="28"></u-icon></view>
            </view>
            <view class="info-item flex" @click="toModify('pw')">
                <view class="label">密码</view>
                <view class="item" style="color: #777">修改<u-icon class="ml-10" name="arrow-right" color="#666" size="28"></u-icon></view>
            </view>
            <view class="info-item flex" @click="toAddress()">
                <view class="label">地址管理</view>
                <view class="item" style="color: #777">去添加 / 修改<u-icon class="ml-10" name="arrow-right" color="#666" size="28"></u-icon></view>
            </view>
        </view>
        <button class="btn-logout" @click="show = true">退出登录</button>
        <u-modal v-model="show" :show-cancel-button="true" :mask-close-able="true" content="确认退出登录吗?" @confirm="logout"></u-modal>
	</view>
</template>

<script>
    import Vue from 'vue';
    import { desenPhone, desenIdNo } from '../../utils/uitls.ts'
    const app = getApp()

	export default Vue.extend({
		data() {
			return {
                avatarUrl: '',
                name: '',
                idNo: '',
                phone: '',
                show: false
			}
		},
		onShow() {
			this.name = app.globalData.userName
            this.idNo = desenIdNo(app.globalData.userIdNo)
            this.phone = desenPhone(app.globalData.phoneNumber)
            this.avatarUrl = app.globalData.avatarUrl
		},
		methods: {
            toAddress(){
                this.$u.route({
			    	url: 'pages/addressList/addressList',
			    })
            },
            logout(){
                wx.clearStorage({
                    key: 'userInfo',
                    success: () => {
                        getApp().globalData.userName = ''
                        getApp().globalData.userIdNo = ''
                        getApp().globalData.phoneNumber = ''
                        getApp().globalData.avatarUrl = ''
                        getApp().globalData.sessionId = ''
                        this.$refs.uToast.show({
				        	title: '已退出',
				        	type: 'default',
                            callback: () => {
                                this.$u.route({
                                    type: 'tab',
			                    	url: 'pages/mine/mine',
			                    })
                            }
                        })
                    }
                })
            },
            toModify(type){
                this.$u.route('pages/modify/modify', {
                    type
                })
            }
		}
	});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
    height: 100vh;
    background-color: #efefef;
}

.avator-box{
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding: 30rpx 30rpx;
}
.info-list{
    .info-item{
        background-color: #fff;
        justify-content: space-between;
        margin-bottom: 10rpx;
        padding: 35rpx 30rpx;
    }
}
.btn-logout{
    position: absolute;
    bottom: 5vh;
    width: 80vw;
    margin-left: 10vw;
    line-height: 100rpx;
    border: none;
    background-color: $theme-color;
    color: #fff;
}
</style>
